<template>
	<view class="login-container">
		<uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
    <button type="primary" class="btn-login" open-type="getUserInfo" @getuserinfo="getUserInfo">一键登录</button>
    <view class="tips-text">
      <text>请登录</text>
    </view>
	</view>
</template>

<script>
  import {mapMutations,mapState} from 'vuex'
	export default {
		data() {
			return {
				
			};
		},
    computed:{
       ...mapState('m_user',['redirectInfo']),
    },
    methods:{
      ...mapMutations('m_user',['updateUserInfo','updateRedirectInfo','updateToken']),
      getUserInfo(e){
        if (e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了登录授权！');
        this.updateUserInfo(e.detail.userInfo);
        this.updateToken('123');
        if(this.redirectInfo && this.redirectInfo.type === 'switchTab'){
          uni.switchTab({
            url:this.redirectInfo.from,
            complete: () => {
              this.updateRedirectInfo(null);
            }
          })
        }
        //this.getToken(e.detail);
      },
      async getToken(info){
        // 调用微信登录接口
          const [err, res] = await uni.login().catch(err => err);
          // 判断是否 uni.login() 调用失败
          if (err || res.errMsg !== 'login:ok') return uni.$showError('登录失败！');
          // 准备参数对象
            const query = {
              code: res.code,
              encryptedData: info.encryptedData,
              iv: info.iv,
              rawData: info.rawData,
              signature: info.signature
            };
            console.log(query);
            // 换取 token
            const { data: loginResult } = await uni.$http.post('/api/public/v1/users/wxlogin', query);
            console.log(loginResult);
            if (loginResult.meta.status !== 200) return uni.$showMsg('登录失败！')
            uni.$showMsg('登录成功')
            
            
      }
    }
	}
</script>

<style lang="scss">

.login-container{
  height: 760rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f8f8f8;
  overflow: hidden;
  position: relative;
  &::after {
    position: absolute;
    content: '';
    display: block;
    width: 100%;
    height: 40px;
    left: 0;
    bottom: 0;
    background-color: white;
    border-radius: 100%;
    transform: translateY(50%);
  }
  .btn-login{
    width: 90%;
    border-radius: 100px;
    margin: 15px 0;
    background-color: #C00000;
  }
  .tips-text {
      font-size: 12px;
      color: gray;
    }
}
</style>
